//工具栏
import React,{FC} from "react";
import {Button,Space,Tooltip} from 'antd'
import { BlockOutlined, CopyOutlined, DeleteOutlined, DownOutlined, EyeInvisibleOutlined, LockOutlined, RedoOutlined, UndoOutlined, UpOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { ActionCreators as UndoActionCreators } from "redux-undo";
import {changeComponentHidden, copySelectedComponent, moveComponent, pasteCopiedComponent, removeSelectedComponent, toggleComponentLock }from '../../../store/componentsReducer'
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";

const EditToolBar:FC=()=>{
    const dispatch=useDispatch()
    const {selectedId,componentList,selectedComponent,copiedComponent}=useGetComponentInfo()
    const { isLocked } =selectedComponent||{}
    const length=componentList.length
    const selectedIndex=componentList.findIndex(c=>c.fe_id===selectedId)
    const isFirst=(selectedIndex<=0)
    const isLast =(selectedIndex===length-1)
    //删除选中的组件
    function handleDelete(){
       dispatch(removeSelectedComponent()) 
    }
    //隐藏选中组件
    function handleHidden(){
        dispatch(changeComponentHidden({fe_id:selectedId,isHidden:true}))
    }
    //锁定/解锁
    function handleLock(){
        dispatch(toggleComponentLock({fe_id:selectedId}))
    }
    //复制
    function copy(){
        dispatch(copySelectedComponent())
    }
    //粘贴
    function paste(){
        //粘贴事件 得有东西才可以粘贴
        dispatch(pasteCopiedComponent())
    }
    //上移
    function upMove(){
        if(isFirst) return 
        dispatch(moveComponent({oldIndex:selectedIndex,newIndex:selectedIndex-1}))
    }
     //下移
    function downMove(){
        if(isLast) return 
         dispatch(moveComponent({oldIndex:selectedIndex,newIndex:selectedIndex+1}))
    }
       //撤销
    function undo(){
        if(isLast) return 
         dispatch(UndoActionCreators.undo())
    }

       //重做
    function redo(){
        if(isLast) return 
         dispatch(UndoActionCreators.redo())
    }


    return <Space>
        <Tooltip title='删除'>
            <Button shape="circle" icon={<DeleteOutlined/>} onClick={handleDelete}></Button>
        </Tooltip>
         <Tooltip title='隐藏'>
            <Button shape="circle" icon={<EyeInvisibleOutlined/>} onClick={handleHidden}></Button>
        </Tooltip>
         <Tooltip title='锁定'>
            <Button shape="circle" icon={<LockOutlined/>} onClick={handleLock} type={isLocked?'primary':'default'}></Button>
        </Tooltip>
        <Tooltip title='复制'>
            <Button shape="circle" icon={<CopyOutlined/>} onClick={copy}></Button>
        </Tooltip>
       <Tooltip title='粘贴'>
            <Button shape="circle" icon={<BlockOutlined/>} onClick={paste} disabled={copiedComponent===null}></Button>
        </Tooltip>
         <Tooltip title='上移'>
            <Button shape="circle" icon={<UpOutlined/>} onClick={upMove} disabled={isFirst}></Button>
        </Tooltip>
         <Tooltip title='下移'>
            <Button shape="circle" icon={<DownOutlined/>} onClick={downMove} disabled={isLast}></Button>
        </Tooltip>
          <Tooltip title='撤销'>
            <Button shape="circle" icon={<UndoOutlined/>} onClick={undo} ></Button>
        </Tooltip>
         <Tooltip title='重做'>
            <Button shape="circle" icon={<RedoOutlined/>} onClick={redo}></Button>
        </Tooltip>
       
    </Space>
}
export  default EditToolBar